<template>
    <div id="app" :class="{'with-tab':showTab}">
        <keep-alive>
            <router-view />
        </keep-alive>
       <transition name="upper" mode="out-in">
           <van-tabbar route v-if="showTab" >
               <van-tabbar-item replace to="/index" icon="home-o">咨询首页</van-tabbar-item>
               <van-tabbar-item replace to="/support" icon="smile-o">导师帮扶</van-tabbar-item>
               <van-tabbar-item replace to="/activity" icon="todo-list-o">赛事培训</van-tabbar-item>
               <van-tabbar-item replace to="/mine" icon="manager-o">我的主页</van-tabbar-item>
           </van-tabbar>
       </transition>
    </div>
</template>
<script lang="ts">
    import Vue, {ComponentOptions, VueConstructor} from "vue"
    import Component from 'vue-class-component'

    @Component
    export default class App extends Vue implements ComponentOptions<Vue> {
        name = "App";
        get showTab(){
            return /^\/(index|support|activity|mine)$/.test(this.$route.path)
        }
    }
</script>

<style lang="scss">
    @import "~assets/theme.scss";
    #app{
        background:#f5f5f5;
        min-height:100vh;
        box-sizing: border-box;
        &.with-tab{
            padding-bottom: 50px;
        }
       /deep/ .van-tabbar-item__icon{
            margin-bottom: 3px;
            font-size: 22px;
        }
        .upper-enter-active{
            transition: .2s;
        }
        .upper-enter{
            transform: translate3d(0,100%,0);
            opacity: 0;
        }
    }
</style>
